//out:../css/index.css
@import url(./base.less);

.box{
    position: relative;
    width: 100PX;
    height: 100px;
    margin: 100PX auto;
    .top{
        position: absolute;
        ul{
            position: relative;
            li{
                position: absolute;
                .littleBox{
                    position: relative;
                    .shang{
                        height: 43px;
                        width: 50px;
                        background-color: #ffd74d;
                        transform:rotate(-30deg) skew(30deg);
                        text-align: center;
                    }
                    .side{
                        display: flex;
                        position: absolute;
                        left:-22px;
                        top: 37px;
                        .zuo{
                            height: 42px;
                            width: 50px;
                            background-color: #e7a22c;
                            transform:rotate(30deg) skew(30deg);
                        }
                        .you{
                            margin-left: -8px;
                            height: 42px;
                            width: 50px;
                            background-color: #c77530;
                            transform: rotate(-30deg) skew(-30deg);
                        }
                    }
                }
                &:nth-child(1){
                    z-index: 1;
                    animation: anim1 2s infinite linear;
                }
                &:nth-child(2){
                    top:24px;
                    left:41px;
                    z-index: 2;
                    animation: anim2 2s infinite linear;
                }
                &:nth-child(3){
                    top: -1px;
                    left: 83px;
                    animation: anim3 2s infinite linear;
                }
                &:nth-child(4){
                    top: 24px;
                    left: 126px;
                    animation: anim4 2s infinite linear;
                }
            }
        }
    }
    .bottom{
        position: absolute;
        top: 200PX;
        ul {
            position: relative;
            li {
                position: absolute;
                .shadowBox {
                    position: relative;
                    .shang {
                        height: 43px;
                        width: 50px;
                        background-color: #dbdbdb;
                        transform: rotate(-30deg) skew(30deg);
                        text-align: center;
                    }
                }
                &:nth-child(1) {
                    z-index: 1;
                    animation: anim1 2s infinite linear;
                }

                &:nth-child(2) {
                    top: 24px;
                    left: 41px;
                    z-index: 2;
                    animation: anim2 2s infinite linear;
                }

                &:nth-child(3) {
                    top: -1px;
                    left: 83px;
                    animation: anim3 2s infinite linear;
                }

                &:nth-child(4) {
                    top: 24px;
                    left: 126px;
                    animation: anim4 2s infinite linear;
                }
            }
        }
    }
}



@keyframes anim1 {
    0%{
        top: 0;
        left: 0;
        z-index: 3;
    }
    5%{
        top: -25px;
        left: 43px;
        z-index: 1;
    }
    30%{
        top: -1px;
        left: 83px;
        z-index: 2;
    }
    50%{
        top: 24px;
        left: 126px;
        z-index: 3;
    }
    55%{
        top: 48px;
        left: 84px;
        z-index: 4;
    }
    80%{
        top: 24px;
        left: 41px;
        z-index: 3;
    }
    100%{
        top: 0;
        left: 0;
        z-index: 3;
    }
}
@keyframes anim2 {
    0%{
        top: 24px;
        left: 41px;
        z-index: 3;
    }
    20%{
        top: 0;
        left: 0;
        z-index: 3;
    }
    25%{
        top: -25px;
        left: 43px;
        z-index: 1;
    }
    50%{
        top: -1px;
        left: 83px;
        z-index: 2;
    }
    70%{
        top: 24px;
        left: 126px;
        z-index: 3;
    }
    75%{
        top: 48px;
        left: 84px;
        z-index: 4;
    }
    100%{
        top: 24px;
        left: 41px;
        z-index: 3;
    }
}
@keyframes anim3 {
    0% {
        top: -1px;
        left: 83px;
        z-index: 2;
    }

    20% {
        top: 24px;
        left: 126px;
        z-index: 3;
    }

    25% {
        top: 48px;
        left: 84px;
        z-index: 4;
    }

    50% {
        top: 24px;
        left: 41px;
        z-index: 3;
    }

    70% {
        top: 0;
        left: 0;
        z-index: 2;
    }

    75% {
        top: -25px;
        left: 43px;
        z-index: 1;
    }
    100% {
        top: -1px;
        left: 83px;
        z-index: 2;
    }
}

@keyframes anim4 {
    0% {
        top: 24px;
        left: 126px;
        z-index: 3;
    }

    5% {
        top: 48px;
        left: 84px;
        z-index: 4;
    }

    30% {
        top: 24px;
        left: 41px;
        z-index: 3;
    }

    50% {
        top: 0;
        left: 0;
        z-index: 2;
    }

    55% {
        top: -25px;
        left: 43px;
        z-index: 1;
    }

    80% {
        top: -1px;
        left: 83px;
        z-index: 2;
    }
    100% {
        top: 24px;
        left: 126px;
        z-index: 3;
    }
}
